<template>
  <div>
    <header>
      <img src="../../public/img/微信截图_20221222194912.png" alt />
      <van-tabs v-model="active">
        <van-tab title="数码电器"></van-tab>
        <van-tab title="家用电器"></van-tab>
        <van-tab title="家具"></van-tab>
        <van-tab title="时尚服装"></van-tab>
        <van-tab title="分类"></van-tab>
      </van-tabs>
    </header>
    <swipe></swipe>
    <div class="box1">
      <img src="../../public/img/微信截图_20221222211019.png" alt />
    </div>
    <div class="box2">
      <div class="left">
          <p>限时秒杀</p>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
        <div class="box3" v-for="item in list " :key="item.id">
            <img :src="url+item.img" alt="">
        </div>
      </div>
      <div class="right">
        <div class="top">
            <h4>品牌上新</h4>
            <p>9点整，抢打牌</p>
            <div class="box6">疯抢红包></div>
          <!-- <img src="../../public/img/small.png" alt /> -->
        </div>
        <div class="bottom">
            <h4>日用好物</h4>
            <p>愿君多采撷</p>
            <div class="box7">塞满奖券></div>
          <!-- <img src="../../public/img/02.png" alt /> -->
        </div>
      </div>
    </div>
    <tabber></tabber>
  </div>
</template>

<script>
import swipe from "./swipe";
import tabber from "./tabber";
export default {
  name: "MyappIndex",
  components: {
    swipe,
    tabber,
  },
  data() {
    return {
      active: 0,
      time: 30 * 60 * 60 * 1000,
    url:'https://api.aslegou.top',
    list:[]
    };
  },

  mounted() {this.getlist()},
    
  methods: {
    getlist() {
        this.$axios.get('https://api.aslegou.top/api/getseckill').then(res=>{
            console.log(res);
             this.list = res.data.list
             console.log(this.list,'111');
        })
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 100%;
  // height: 100px;
  background-color: rgb(190, 77, 77);
  img {
    width: 100%;
    height: 100px;
  }
}
.van-tabs {
  background-color: rgb(190, 77, 77);
}
.box1 {
  width: 100%;
  height: 80px;
  img {
    width: 100%;
    height: 100%;
  }
}
.box2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 180px;
  background-color: burlywood;
  .left {
    width: 50%;
    height: 100%;
    background-image: url("../../public/img/big.png");
  }
  .right {
    width: 50%;
    height: 100%;
    
    .top {
      width: 100%;
      height: 50%;
      background-image: url("../../public/img/small.png");
    //   img {
    //     width: 100%;
    //     height: 100%;
        
    //   }
    h3{
        color: red;
    }
    p{
        color: red;
    }
    .box6{
        width: 80px;
        height: 23px;
        background-color: red;
        color: #fff;
        border-radius: 0 15px 15px 0;
    }
    }
    .bottom {
      width: 100%;
      height: 50%;
      background-image: url("../../public/img/02.png");
    //   img {
    //     width: 100%;
    //     height: 100%;
    //   }
    h3{
        color: purple;
    }
    p{
        color: purple;
    }
     .box7{
        width: 80px;
        height: 23px;
        background-color:purple;
        color: #fff;
        border-radius: 0 15px 15px 0;
    }
    }
  }
}
  .colon {
    display: inline-block;
    margin: 0 4px;
    color:green;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color:green;
  }
  p{
      margin: 10px 0 10px 0;
      color: green;
  }
  .box3{
      margin: 20px 0 0 20px;
      width: 80px;
      height: 80px;
    //   background-color: hotpink;
      
      img{
          width: 100%;
          height: 100%;
          border-radius: 50px;
      }
  }
</style>